<template>
  <div
    class="dialog animated"
    :class="open? 'fadeIn':'fadeOut'"
    v-show="show"
    :style="{visibility: (visible?'visible':'hidden')}"
  >
    <div class="panel animated" :class="open? 'zoomIn':''">
      <div class="title">
        {{title}}
        <div class="close" @click="cancel()"></div>
      </div>
      <div class="form">
        <div class="row row_4">
          <div class="label">角色名称：</div>
          <div class="value">{{roleData.roleName}}</div>

          <div class="label">角色类型：</div>
          <div class="value">{{roleData.roleModeName}}</div>
        </div>

        <div class="line_from"></div>
        <el-row>
          <span style="font-size:16px;color:#666666;">选择的角色权限列表</span>
          <el-row style="margin-top: 0.2rem;" v-if="!isAdmin">
            <el-col :span="24">
              <div class="grid-content bg-purple">菜单名称</div>
            </el-col>
          </el-row>
          <el-row style="margin-top: 0.2rem;" v-else>
            <el-col :span="16">
              <div class="grid-content bg-purple">菜单名称</div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">类型</div>
            </el-col>
          </el-row>
          <el-tree
            ref="tree"
            class="tree"
            :data="sysRoledata"
            :props="defaultProps"
            show-checkbox
            node-key="menuId"
            :default-expanded-keys="roleData.menuIds"
            :default-checked-keys="roleData.menuIds"
            check-strictly
            :render-content="renderContent"
          ></el-tree>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
var vm, $fileInput, user;
export default {
  data: function() {
    return {
      show: false,
      open: false,
      isAdmin: false,
      visible: false,
      title: "",
      roleData: {},
      sysRoledata: [],
      roleModeList: [],
      formLabelWidth: "140px",
      defaultProps: {
        children: "list",
        label: "name"
      }
    };
  },
  methods: {
    init: function(data) {
      vm.show = true;
      setTimeout(function() {
        vm.open = true;
        vm.visible = true;
      }, 1);
      console.log(data);
      //获取数据字典
      let dicdata = tool.getItem(lsKey.dict, true);
      vm.isAdmin = user.roleMode == 0;
      this.roleModeList = dicdata["role_mode"];
      vm.title = "查看角色";
      vm.roleData = {
        roleId: data.roleId,
        roleName: data.roleName,
        roleMode: data.roleMode,
        roleModeName: "",
        menuIdList: [],
        menuIds: data.menuIds,
        remark: ""
      };
      for (let i = 0; i < this.roleModeList.length; i++) {
        if (this.roleModeList[i].value == data.roleMode) {
          vm.roleData.roleModeName = this.roleModeList[i].name;
        }
      }
      let paras = {
        roleId: data.roleId
      };
      api.selectRoleMenus(paras).then(function(data) {
        vm.sysRoledata = data.list;
        vm.getList();
      });
    },
    renderContent(h, { node, data, store }) {
      var systype = "";
      var str = "";
      if (data.type == 0) {
        systype = "导航";
        str = "background: #409EFF;border-radius: 5px;padding:0.01rem 0.04rem";
      } else if (data.type == 1) {
        systype = "页面";
        str = "background: #67C23A;border-radius: 5px;padding:0.01rem 0.04rem";
      } else {
        systype = "接口";
        str = "background: #E6A23C;border-radius: 5px;padding:0.01rem 0.04rem";
      }
      //
      if (user.roleMode == 0) {
        return (
          <span style="flex: 1; display: flex; align-items: center; justify-content: space-between;">
            <span>
              <span>{node.label}</span>
            </span>
            <span style="width:2.6rem;text-align: center;">
              <span style={str}>{systype}</span>
            </span>
          </span>
        );
      } else {
        return (
          <span style="flex: 1; display: flex; align-items: center; justify-content: space-between;">
            <span>
              <span>{node.label}</span>
            </span>
          </span>
        );
      }
    },
    getList() {
      for (let i = 0; i < this.sysRoledata.length; i++) {
        this.sysRoledata[i].disabled = true;
        let oneSysRoleData = this.sysRoledata[i];
        if (oneSysRoleData.list != null && oneSysRoleData.list.length > 0) {
          for (let a = 0; a < oneSysRoleData.list.length; a++) {
            oneSysRoleData.list[a].disabled = true;
            let twoSysRoleData = oneSysRoleData.list[a];
            if (twoSysRoleData.list != null && twoSysRoleData.list.length > 0) {
              for (let b = 0; b < twoSysRoleData.list.length; b++) {
                twoSysRoleData.list[b].disabled = true;
                let threeSysRoleData = twoSysRoleData.list[b];
                if (
                  threeSysRoleData.list != null &&
                  threeSysRoleData.list.length > 0
                ) {
                  for (let c = 0; c < threeSysRoleData.list.length; c++) {
                    threeSysRoleData.list[c].disabled = true;
                  }
                }
              }
            }
          }
        }
      }
    },
    cancel: function() {
      //隐藏弹窗
      vm.open = false;
      setTimeout(function() {
        vm.isShow = false;
        vm.show = false;
        vm.visible = false;
      }, 500);
    }
  },
  created: function() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
  }
};
</script>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped>
.form {
  font-size: 0.16rem;
  padding: 0 0.4rem;
  color: #666666;
}
.line_from {
  height: 1px;
  margin: 0.24rem 0rem 0.18rem 0rem;
  background-color: #f3f6fc;
}
.row {
  overflow: hidden;
}
.row > div {
  height: 0.4rem;
  line-height: 0.4rem;
  float: left;
  /*内容超出省略号*/
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row_2 {
  padding-bottom: 0.1rem;
  border-bottom: 0.01rem solid #f3f6fc;
  margin-bottom: 0.1rem;
}
.row_4 {
  margin-top: 0.1rem;
  padding-top: 0.1rem;
}
.label {
  /*outline: 1px solid red;*/
  width: 1rem;
  font-size: 0.16rem;
  color: #666666;
  text-align: right;
  padding-right: 0.1rem;
}

.value,
.value_2 {
  width: 3.2rem;
  font-size: 0.18rem;
  color: #333333;
  letter-spacing: 0.02rem;
}
.btn_div {
  padding: 0 0 0.3rem 0;
}
.panel {
  width: 12rem;
}
.tree {
  font-size: 0.16rem;
  padding: 0.1rem 0.5rem;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #d3dce6;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #d3dce6;
}
.grid-content {
  line-height: 0.5rem;
  text-align: center;
}
.row-bg {
  padding: 10px 0;
  background-color: #d3dce6;
}
</style>
